<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-table :data="tableData" stripe>

        <el-table-column prop="date" label="日期"></el-table-column>

        <el-table-column prop="name" label="姓名"></el-table-column>

        <el-table-column prop="address" label="地址"></el-table-column>

        <el-table-column label="操作" align="center">

            <!--

                slot-scope：作用域插槽，可以获取表格数据

                scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法

            -->

            <template slot-scope="scope">

                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>

                <el-button type="danger" size="mini"  @click="handleDelete(scope.row)">删除</el-button>

            </template>

        </el-table-column>

    </el-table>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{

            tableData: [{

                date: '2016-05-02',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1518 弄'

            }, {

                date: '2016-05-04',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1517 弄'

            }, {

                date: '2016-05-01',

                name: '王小虎',

                address: '上海市普陀区金沙江路 1519 弄'

            }]

        },

        methods:{

            handleUpdate(row){

                alert(row.date);

            },

            handleDelete(row){

                alert(row.date);

            }

        }
    })
</script>
</html>